import React, { Suspense } from 'react'
import { Spin } from 'antd'
import { IRoute } from '@/route'
import constantRoutes, { authRoutes } from '..'

/**
 * @description 路由懒加载
 * @param {Element} Component 需要访问的组件
 * @return element
 */

const lazyLoad = (Component: React.LazyExoticComponent<any>): React.ReactNode => {
  return (
    <Suspense
      fallback={
        <Spin
          size='large'
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            height: '100%'
          }}
        />
      }
    >
      <Component />
    </Suspense>
  )
}

export default lazyLoad


/**
 * @description 收集处理路由表中的path
 * @param {Array<IRoute>} routes 路由表
 * @param {Array<string>} paths 存储路径的数组
 * @return void
 */
const collectRoutePath = (routes: Array<IRoute>, paths: Array<string>) => {
  routes.forEach(route => {
    if (route?.children && route?.path) {
      collectRoutePath(route.children, paths)
    }

    route?.path && paths.push(route.path)
  })
}


/**
 * @description 所有的路由路径集合
 * @return string[]
 */
export const allRoutePath = () => {
  const paths: string[] = []
  collectRoutePath(authRoutes, paths)
  collectRoutePath(constantRoutes, paths)

  return paths
}
